<template>
  <div class="flow-process-action">
    <div class="flow-process-action__scale">
      <div class="flow-process-action__scale-btn" @click="scaleIn">
        <i class="el-icon-plus"></i>
      </div>
      <div class="flow-process-action__scale-num">{{ scale }}%</div>
      <div class="flow-process-action__scale-btn" @click="scaleOut">
        <i class="el-icon-minus"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'flow-process-action-bar',
  props: {
    scale: {
      type: Number
    }
  },
  methods: {
    scaleIn() {
      this.$emit('update:scale', this.scale + 10)
    },

    scaleOut() {
      if (this.scale <= 0) {
        return
      }
      this.$emit('update:scale', this.scale - 10)
    }
  }
}
</script>

<style lang="scss" scoped>
.flow-process-action {
  position: absolute;
  right: 30px;
  top: 12px;
  z-index: 3;
  user-select: none;

  &__scale{
    display: flex;
    align-items: center;

    &-btn {
      width: 30px;
      height: 30px;
      background-color: #fff;
      box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      color: #8c8c8c;
      svg {
        width: 20px;
        height: 20px;
        fill: rgba(0, 0, 0, 0.85);
      }
    }

    &-num {
      width: 50px;
      //color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      text-align: center;
      color: #8c8c8c;
    }
  }
}
</style>
